<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>聊天室</h2>
    <div>在线人数: <span id="online-count">0</span></div>
    <div id="content"></div>
    <input id="msg" type="text"/>
    <input id="btn" type="button" value="发送"/>
</body>
<script>
    // 初始化 websocket 对象
    const ws = new WebSocket('ws://localhost:8080/connect');

    // 接收服务端的信息
    ws.onmessage = (event) => {
        // 判断是否是当前在线人数消息
        if (event.data.startsWith("当前在线人数：")) {
            // 获取当前在线人数
            document.getElementById("online-count").innerHTML = event.data.split("：")[1];
        } else {
            // 获取消息
            let parse = JSON.parse(event.data);
            document.getElementById("content").innerHTML += parse.time + ": " + parse.user + "<br/>" + parse.message + "<br/>";
        }
    };

    // 绑定事件发送信息
    document.getElementById("btn").addEventListener("click", () => {
        // 发送输入框中的数据
        ws.send(document.getElementById("msg").value);
        // 清空输入框
        document.getElementById("msg").value = "";
    })
</script>
</html>